<template>
    <div class="card-box">


        <el-card class="box-card">
            <div class="msg">
                <div>
                    <span class="title">我的信息</span>
                </div>
                <div class="action">
                    <a href="#/info">编辑</a>
                </div>
            </div>

            <div class="info-box">
                <el-row>
                    <el-col :span="8" class="user-avatar">
                        <img :src="LOCAL.USER_INF.avatarUrl" width="120" height="120" alt="">
                    </el-col>
                    <el-col :span="16" class="userinfo">
                        <el-row>
                            <p>昵称:{{ LOCAL.USER_INF.nickName }}</p>
                            <p>用户账号:{{ LOCAL.USER_INF.account }}</p>
                            <p>手机号:{{ LOCAL.USER_INF.mobile }}</p>
                            <span>密码:*********</span>
                            <el-button style="margin-left:100px;" size="mini" @click="isEditPwd = true"
                                type="primary">修改密码</el-button>
                        </el-row>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-dialog title="修改密码" :visible.sync="isEditPwd" width="30%" center :append-to-body="true"
            :before-close="handleClose">
            <div class="rest-box">
                <div>
                    <div class="input-item">
                        <el-row>
                            <el-col span="3">
                                <span>旧密码: </span>
                            </el-col>
                            <el-col span="21">
                                <el-input v-model="restPwdRes.old" placeholder="请输入内容"></el-input>
                            </el-col>
                        </el-row>
                    </div>

                    <div class="input-item">
                        <el-row>
                            <el-col span="3">
                                <span>新密码: </span>
                            </el-col>
                            <el-col span="21">
                                <el-input v-model="restPwdRes.new" placeholder="请输入内容"></el-input>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="isEditPwd = false">取 消</el-button>
                <el-button type="primary" @click="isEditPwd = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<style scoped>
.info-box {
    width: 70vh;
    margin: 0 auto;
    height: auto;
}

.rest-box span {
    height: 40px;
    font-size: 14px;
    text-align: center;
    line-height: 40px;
    color: #333;
}

.info-box span {
    height: 40px;
    font-size: 14px;
    text-align: center;
    line-height: 40px;
    color: #333;
}

.input-item {
    margin-top: 10px;
    margin-bottom: 15px;
}

.card-box {
    width: 80vh;
    height: 36vh;
}

.box-card {
    height: 100%;
}

.title {
    font-weight: 500;
}

.info-box {
    margin-top: 20px;
    background-color: #E7ECF1;
    height: 170px;
    border-radius: 5px;
}

.user-avatar {
    margin-top: 25px;

}

.user-avatar img {
    border-radius: 5px;
    overflow: hidden;
}

.userinfo {
    text-align: left;
}

.msg {
    display: flex;
    margin-right: 10px;
    justify-content: space-between;
}

.item {
    margin-right: 10px;
    margin-top: 16px;
}

.msg .action a {
    color: #0080ff;
    text-decoration: none;
    line-height: 22px;

    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
}
</style>
<script>
import LOCAL from "@/main"
export default {
    props: {

        userinfo: {
            userId: {
                type: String,
                default: '0'
            },
            nicname: {
                type: String,
                default: '用户名'
            },
            account: {
                type: String,
                default: '用户账号'
            },
            phone: {
                type: String,
                default: '用户手机号'
            },
            email: {
                type: String,
                default: '用户电子邮箱'
            },
            company: {
                type: String,
                default: '用户所属公司'
            }
        }
    },
    data() {
        return {
            LOCAL,
            isEditPwd: false,
            restPwdRes: {
                old: "",
                new: ""
            }
        }
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(() => {
                    //确定关闭
                    this.$message.info('已取消修改密码');
                    done();
                })
                .catch(() => {
                    //取消关闭
                });
        }
    }
}
</script>